<template>
<div>
  <el-row>
    <el-col :span="6">
      <div class="grid-content bg-purple">
        <img src="../img/12306.png" alt="12306铁路"  @click="shou">
      </div>
    </el-col>
    <el-col :span="6">
      <div class="grid-content bg-purple-light">
        <el-input
          size="small"
          placeholder="请输入内容"
          v-model="input"
          class="sou">
          <el-button slot="append" icon="el-icon-search" style="background-color: #3b99fc;color: #ffffff; font-weight: 900;"></el-button>
        </el-input>
      </div>
    </el-col>
    <el-col :span="6">
      <div class="grid-content bg-purple" style="font-size: 13px;margin-top: 30px;color: #3b99fc">
        无障碍
        |
        爱心版
        |
        English
        |
        <el-dropdown style="margin-top: -5px">
          <el-button type="primary" size="mini">
            我的12306<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item><span @click="goOrder">火车票订单</span> </el-dropdown-item>
            <el-dropdown-item><span @click="hOrder">酒店订单</span></el-dropdown-item>
            <el-dropdown-item>乘车人</el-dropdown-item>
            <el-dropdown-item>查看个人信息</el-dropdown-item>
            <el-dropdown-item>车站大屏</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-col>
    <el-col :span="6">
      <div class="grid-content bg-purple-light" style="font-size: 13px;margin-top: 30px;">
        <router-link v-if="!user.userName" to="/login" style="color: #3b99fc">登录</router-link>
        <span v-if="user.userName">欢迎, {{ user.userName }}</span>
        <a href="#" v-if="user.userName" @click="logout">退出</a>
        <router-link to="/zhuce" style="color: #3b99fc">注册</router-link>
      </div>
    </el-col>
  </el-row>
</div>
</template>

<script>
export default {
  name: "tou",
  data(){
    return{
      input:'',
      user:{
        userName:'',
      },
    }
  },
  methods:{
    goOrder(){
      this.$router.push('order')
    },
    hOrder(){
      this.$router.push('hotelorder')
    },
    logout() {
      // 执行退出登录的逻辑
      var uuid = localStorage.getItem("token");
      this.$axios.get('/user/logout',{
        params:{
          uuid:uuid
        }
      })
        .then(res=>{
          if (res.data.code==200){
            localStorage.clear();
            this.$router.push('/login')
          }
        })

    },
    shou(){
      this.$router.push('/')
    }
  },
  mounted() {
    this.$axios.get('/user/user')
      .then(res=>{
        console.log(res.data.data)
        this.user=res.data.data;
      })
  }
}
</script>

<style scoped>
.sou {
  margin-top: 25px;
}

.el-dropdown {
  vertical-align: top;
}

.el-dropdown + .el-dropdown {
  margin-left: 15px;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.centered-menu-item {
  display: flex;
  justify-content: center;
  background-color: #5199FD;
}

.el-menu--horizontal > .el-menu-item.is-active {
  border: none;
}
</style>
